<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>

            /*
                :link 用来表示没访问过的链接(正常的链接)
            */
            a:link {
                /*因为*/
                display: block;
                width: 93px;
                height: 29px;
                background-image: url('./img/08/link.png');
            }


            /*
                :hover用来表示鼠标移入时触发的效果
            */
            a:hover {
                background-image: url('./img/08/hover.png');
            }

            /* :active用来表示鼠标点击的时候触发的效果*/
            a:active {
                background-image: url('./img/08/active.png');
            }


            /*
                图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载
                    浏览器加载外部资源时是按需加载的,用则加载,不用则不加载
                    像我们上边的练习link会首先加载,而hover和active会在指定的状态触发时才会加载
                    不触发不加载
             */

        </style>
    </head>
    <body>
        <a href="javascript:"></a>
    </body>
</html>